<template>
    <div class="balance">
        <div class="group">
            <div class="item">
                <div class="l">
                    <div class="item_sub ">
                        <span>余额(元)</span>
                    </div>
                    <div class="item_sub money">
                        <span>100.00</span>
                    </div>
                    <div class="item_sub">
                        <span>支付车费时优先使用</span>
                    </div>
                </div>
                <div class="r">
                   <div class="item_sub">
                        <i class="iconfont icon-wenti-copy"></i>
                        <span>常见问题</span>
                   </div>
                </div>
            </div>
        </div>

        <div class="detail" v-show="showDetail">
            <div class="group">
                <div class="item">
                    <div class="l">
                        <div class="item_sub ">
                            <span>支付</span>
                        </div>
                        <div class="item_sub ">
                            <span>2017.01.21</span>
                        </div>
                    </div>
                    <div class="r">
                        <div class="item_sub">
                                <span>-11</span>
                        </div>
                    </div>
                </div>
                <div class="item">
                    <div class="l">
                        <div class="item_sub ">
                            <span>支付</span>
                        </div>
                        <div class="item_sub ">
                            <span>2017.01.21</span>
                        </div>
                    </div>
                    <div class="r">
                        <div class="item_sub">
                                <span>-11</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="footer" @click="showDetail=true">
            <ibutton>提现</ibutton>
        </div>
    </div>
</template>

<script>
    import ibutton from '@/components/common/ibutton'
    export default {
        name:'balance',
        data(){
            return{
                showDetail:true
            }
        },
        components:{ibutton}
    }
</script>

<style lang="scss" scoped>
    @import '../../../../style/var.scss';
    .balance{
        position: relative;
        width:100%;
        height:100%;
        padding:50px 0;

        .group{
            background:$white;
            box-shadow: 0 0 10px 0 $border_base;
            .item{
                display: flex;
                justify-content: space-between;
                padding:50px;
                box-shadow: 0 0 1px 0 $border_base;
                font-size: 14px;
                color:$font_color_sub;

                .item_sub{
                    display: flex;
                    align-items: center;
                }
                .money{
                    font-size: 40px;
                    color:$primary;
                }
                .iconfont{
                    padding:0 20px;
                }
            }
        }

        .detail{
            padding:50px 0;
        }
    
        .footer{
            position: absolute;
            bottom:0;
            width:100%;
            padding:50px;
        }
    }
</style>

